<template>
  <div>
    <div v-show="isShow === 1">
      <el-card class="navWrap">
        <div class="nav">双链生鲜供应链平台:合同订单列表</div>
      </el-card>
      <!-- 表单 -->
      <el-card class="infoContainer">
        <el-form :inline="true" label-width="80px" class="demo-form-inline">
          <el-form-item class="operating" label="运营状态: ">
            <el-select
              size="small"
              class="select"
              v-model="play"
              placeholder="请选择活动区域"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ID: " class="operating">
            <el-input v-model="id" size="small" class="select"></el-input>
          </el-form-item>
          <el-form-item class="btn1">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item class="btn2">
            <el-button icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 按钮 -->
        <el-button type="primary" size="small"
          icon="el-icon-plus" @click="addData" style="margin-right:30px" >新建</el-button>
        <!-- <el-button size="small" :disabled="checkList.length==0" icon="el-icon-edit">批量更新</el-button> -->
        <!-- <el-button type="danger"
          :disabled="checkList.length == 0" size="small" icon="el-icon-delete" >批量删除</el-button> -->
<!-- 弹框 -->
            <el-popover placement="right" v-model="popover" 
              width="800" trigger="click">
              <el-card>
                <div slot="header">
                  <span style="font-size:18px">注意！你正在删除数据，执行之后不可恢复</span>
                  <el-button style="float:right; font-size:20px; margin-top:-10px; color:#333" 
                  @click="popover=false" type="text" icon="el-icon-close"></el-button>
                </div>
                <div class="tishi">
                  一共 <span>{{checkList.length}}</span> 项
                </div>
                <el-table :data="checkList" border class="table">
                    <el-table-column prop="id" label="ID" width="120">
                      <!-- <template>{{ scope.row.date }}</template> -->
                    </el-table-column>

                    <el-table-column prop="displayName" label="标题" width="120">
                    </el-table-column>

                    <el-table-column label="买方" show-overflow-tooltip width="150">
                      <template slot-scope="{ row }">
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="row.seller.id + '-' + row.buyer.displayName"
                          placement="right-end"
                        >
                          <span class="tooltip">{{ row.buyer.displayName }}</span>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column label="卖方" width="150" show-overflow-tooltip>
                      <template slot-scope="{ row }">
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="row.seller.id + '-' + row.buyer.displayName"
                          placement="right-end"
                        >
                          <span class="tooltip">{{ row.buyer.displayName }}</span>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="status.displayName"
                      label="运营状态"
                      show-overflow-tooltip
                    >
                      <template slot-scope="{ row }">
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="'cancell' + '-' + row.status.displayName"
                          placement="right-end"
                        >
                          <span class="tooltip">{{ row.status.displayName }}</span>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <!-- 金额 -->
                    <el-table-column
                      prop="totalAmount"
                      label="总金额"
                      class="totalAmount"
                      show-overflow-tooltip
                      width="150"
                    >
                      <template slot-scope="{ row }">
                        <div class="totalAmount">
                          ￥
                          {{
                            ((row.totalAmount + "").length == 9
                              ? (row.totalAmount + "").slice(-11, -8) + ","
                              : "") +
                            (row.totalAmount + "").slice(-8, -5) +
                            "," +
                            (row.totalAmount + "").slice(-5, -2) +
                            "," +
                            (row.totalAmount + "").slice(-2) +
                            ".00"
                          }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column label="合同" width="150" show-overflow-tooltip>
                      <template slot-scope="{ row }">
                        <el-tooltip
                          class="item"
                          effect="light"
                          :content="row.contract.id + '-' + row.contract.displayName"
                          placement="right-end"
                        >
                          <div class="tooltip1">{{ row.contract.displayName }}</div>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="createTime"
                      label="创建时间"
                      show-overflow-tooltip
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="lastUpdateTime"
                      label="最后更新时间"
                      show-overflow-tooltip
                      width="150"
                    >
                    </el-table-column>
                </el-table>
              </el-card>

         <el-button style="float:right; margin-left:20px" @click="deletAll" type="primary">确定</el-button>
         <el-button style="float:right; " @click="popover=false">取消</el-button>
              <!-- <el-button slot="reference">click 激活</el-button> -->
            <el-button type="danger" slot="reference" :disabled="checkList.length == 0" 
             size="small" icon="el-icon-delete" >批量删除</el-button>
            </el-popover>

        <div class="allsele"> 一共 <span>{{ allData.length }}</span> 项
          <a v-if="checkList.length == 0">,请选择要操作的项来执行更多功能</a>
          <a v-else>
            已选择<span>{{ checkList.length }}</span> 项
            <span class="span">清空</span>
          </a>
        </div>

        <!-- 表格 -->
        <div class="table">
          <el-table
            :data="stateTime"
            tooltip-effect="dark"
            @selection-change="checkOne"
            style="width: 100%"
          >
            <!-- 选择框 -->
            <!-- <template slot-scope = "{row,$index}">
                    <el-checkbox @change="checked(row,$index)" :value="row.version==0" ></el-checkbox>
                </template>   -->
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="id" label="ID" width="120">
              <!-- <template>{{ scope.row.date }}</template> -->
            </el-table-column>

            <el-table-column prop="displayName" label="标题" width="120">
            </el-table-column>

            <el-table-column label="买方" show-overflow-tooltip width="150">
              <template slot-scope="{ row }">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="row.seller.id + '-' + row.buyer.displayName"
                  placement="right-end"
                >
                  <span class="tooltip">{{ row.buyer.displayName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="卖方" width="150" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="row.seller.id + '-' + row.buyer.displayName"
                  placement="right-end"
                >
                  <span class="tooltip">{{ row.buyer.displayName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="status.displayName"
              label="运营状态"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="'cancell' + '-' + row.status.displayName"
                  placement="right-end"
                >
                  <span class="tooltip">{{ row.status.displayName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- 金额 -->
            <el-table-column
              prop="totalAmount"
              label="总金额"
              class="totalAmount"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <div class="totalAmount">
                  ￥
                  {{
                    ((row.totalAmount + "").length == 9
                      ? (row.totalAmount + "").slice(-11, -8) + ","
                      : "") +
                    (row.totalAmount + "").slice(-8, -5) +
                    "," +
                    (row.totalAmount + "").slice(-5, -2) +
                    "," +
                    (row.totalAmount + "").slice(-2) +
                    ".00"
                  }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="合同" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="row.contract.id + '-' + row.contract.displayName"
                  placement="right-end"
                >
                  <div class="tooltip1">{{ row.contract.displayName }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="lastUpdateTime"
              label="最后更新时间"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              prop="address"
              label="操作"
              width="200"
              show-overflow-tooltip
            >
              <!-- <template slot-scope="{row}">
                    <span v-for="val in row.actionList" class="actionName"
                     :key="val.actionId" @click="changData()">{{val.actionName}}</span>
                </template> -->
              <template slot-scope="{ row, $index }">
                <span class="actionName" @click="tradingInfo(row, $index)"
                  >详情</span
                >
                <span class="actionName" @click="tradingUpdate(row, $index)"
                  >更新</span
                >
                <span class="actionName" @click="delet(row, $index)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
          class="pagination"
          layout="prev, pager, next"
          :total="total"
          size="small"
          :page-size="pagesize"
          :current-page="page"
          @current-change="pageChange"
        >
          <!-- @size-change页面数据发生改变触发 -->
          <!-- @current-change当前页发生改变时触发 -->
        </el-pagination>
      </el-card>
    </div>
    <!-- 添加项目组件 -->
    <AddTrading
      @goTrading="isShow = 1"
      v-if="isShow === 2"
      @addItem="addItem"
      @upItem="upItem"
      :upOrAdd='upOrAdd'
      :tradingUpdate = 'upData'
    ></AddTrading>
  </div>
</template>

<script>
import moment from "moment";
import AddTrading from "../components/AddTrading";
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "trading",
  data() {
    return {
      id: "", //表单id
      play: "", //表单输入运营状态
      dataList: [], //一条数据
      newList: [], //每一页数据
      total: 0, //总数据
      page: 1, //当前页数
      pagesize: 10, //每页数据
      checkList: [], //选中的列表
      isShow: 1, //展示组件
      allData: [], // 总数据
      popover:false,//弹出框
      upOrAdd:'',//判断是更新还是添加
      upData:{}//更新数据
    };
  },
  mounted() {
    this.getData();
    console.log(this);
  },

    methods: {
      // 切换到添加页面
      addData() {
        this.upOrAdd = 1
        this.isShow = 2;
      },

    // 获取数据
    async getData() {
      let result = await this.$API.trading.getData();
      //展示数据 创建一个空的数组
      let a = [];
      // 遍历每一项
      result.trading.forEach((item) => {
        // 再遍历需要的数组
        item.contractOrderList.forEach((val) => {
          // 将需要的那一项存到数组中
          a.push(val);
        });
      });
      let num = 0;
      // 为每一项设置一个响应式的索引
      let b = a.map((item) => {
        this.$set(item, "index", num++);
        return item;
      });
      // 将加工好的需要的数据并且有索引的保存
      this.allData = b;
      //  this.newList = result.trading[0].contractOrderList
      // 每一页展示的数据截取10个
      this.newList = b.slice(0, 10);
      //  获取总页数
      this.total = b.length;
      //一条数据
      this.dataList = result.trading[0].contractOrderList[0];
    },
    //分页点击事件
    async pageChange(value) {
      // 点击每一个分页按钮发送请求获取数据
      await this.$API.trading.getData();
      //
      let b = this.allData.slice((value - 1) * 10, value * 10);
      // 赋值给每一页
      this.newList = b;
      // 将当前点击的值赋值,更新当前页
      this.page = value;
    },
    // 点击单选
    checkOne(item) {
      //保存选中的列表
      this.checkList = item;
    },
      // 批量删除按钮
      deletAll(){
        this.popover = false
        this.checkList.forEach(item=>{
          this.allData = this.allData.filter(val=>item.index!==val.index)
        })
        this.newList = this.allData.slice((this.page-1)*10,this.page*10)
        this.total = this.allData.length
        //判断删空最后一页数据时
        if(this.page-1==this.total/10&&this.newList.length==0){
          this.newList = this.allData.slice((this.page-2)*10,(this.page-1)*10)
            this.page = this.total/10
        }
        this.$message.success('删除成功')
      },
      //删除单个数据
      delet(row, index) {
        const { page } = this;
        console.log(this.page);

        // 删除当前展示页面
        this.newList = this.newList.filter(item=>item.index!==row.index)
        // 更新总数据数量
        this.allData = this.allData.filter(item=>item.index!==row.index)
        // 重现获取当前页数据
        this.newList = this.allData.slice((page-1)*10,page*10)
        // 更新总数据
        this.total = this.allData.length
        //判断删除最后一条数据时

        if(page-1==this.total/10&&this.newList.length==0){
          this.newList = this.allData.slice((page-2)*10,(page-1)*10)
            this.page = this.total/10
        }
        this.$message.success('删除成功')
      },
      //更新数据
      tradingUpdate(row){
        this.upOrAdd = 2
        this.isShow = 2
        this.upData =  cloneDeep(row) 
      },
      // 点击单选
      checkOne(item) {
        //保存选中的列表
        this.checkList = item;
      },
      //添加数据
      async addItem(item){
        await this.$API.trading.getData()
        let abc = cloneDeep(this.dataList)
        abc.id = item.ID
        abc.totalAmount = item.allPrice
        abc.contract.displayName = item.pargain
        abc.buyer.displayName = item.buy
        abc.title = item.name
        abc.lastUpdateTime = item.endTime
        abc.createTime = item.startTime
        abc.seller.displayName = item.sell
        abc.status.displayName = item.operation
        abc.index = item.index
        // 总数组添加对象
        this.allData.unshift(abc)
        // 修改数据总数
        this.total = this.allData.length
        // 修改展示数据
        this.newList = this.allData.slice(0,10)
        // 添加完跳转第一页面
        this.page = 1 
      },
      //更新数据
      upItem(val){
        this.newList = this.newList.map(item=>{
          if(item.index==val.index){
            item = val
          }
          return item
        })
      }
    },
    computed: {
      //计算时间
      stateTime() {
        return this.newList.map((item) => {
          item.actionList[2].actionName = "删除";
          item.createTime = moment(item.createTime).format("YYYY-MM-DD hh:mm");
          item.lastUpdateTime = moment(item.lastUpdateTime).format(
            "YYYY-MM-DD hh:mm"
          );
          return item;
        });
      },
    },
  components: {
    AddTrading,
  },
};
</script>

<style lang="less" scoped>
// 弹出框
.tishi{
  width: 100%;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #FFE58F;
  background: #FFFBE6;
  padding: 5px 0 0 30px;
  margin-bottom: 20px;
  span{
    color: #1890FF;
    font-size: 14px;
  }
}
.navWrap {
  margin-bottom: 20px;
  .nav {
    font-size: 20px;
    font-weight: 500;
    margin-left: 60px;
  }
}
// 分页
.pagination {
  width: 100%;
  text-align: center;
  ::v-deep.el-pager {
    .number {
      &.active {
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        border: 1px solid #1890ff;
      }
    }
  }
}
// 表单
.infoContainer {
  width: 98%;
  margin: 0 auto;
  .demo-form-inline {
    .operating {
      margin-right: 50px;
      .select {
        width: 400px;
      }
    }
    .btn1 {
      margin-right: 20px;
    }
  }
  .allsele {
    margin: 10px 0;
    padding: 0 30px;
    width: 100%;
    border: 2px solid #91d5ff;
    border-radius: 10px;
    background-color: #e6f7ff;
    height: 40px;
    line-height: 40px;
    span {
      color: #5492ff;
      &.span {
        margin-left: 30px;
      }
    }
  }
}
// 表格
.table {
  border: 1px solid #eee;
  padding: 8px;
  .tooltip {
    border: 1px solid #beeda0;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #52c45e;
    border-radius: 5px;
    background: #f6ffed;
  }
  ::v-deep.el-table_2_column_16 ,::v-deep.el-table_1_column_6{
    .cell{
      color: red;
    }
  }
  ::v-deep.cell {
    // position: absolute;
    color: black;
  }
  .el-table_2_column_16 {
    .totalAmount {
      color: red;
      font-weight: 700;
    }
  }
  .cell {
    color: black;
  }
  ::v-deep.el-table_1_column_7 ,
  .el-table_2_column_17{
    .tooltip1 {
      border: 1px solid #beeda0;
      height: 25px;
      line-height: 1.4;
      text-align: center;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 3px 5px;
      font-size: 12px;
      font-weight: 600;
      color: #52c45e;
      border-radius: 5px;
      background: #f6ffed;
    }
  }
  .actionName {
    color: #5492ff;
    margin-right: 16px;
    position: relative;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      width: 1px;
      height: 12px;
      background: rgb(218, 216, 216);
      top: 2px;
      left: -8px;
    }
    &:first-child::after {
      content: "";
      position: absolute;
      width: 0;
    }
  }
}


</style>
